<template>
  <div class="container">
    <div>
      <div>
        <span 
          @click="$router.back(-1)"
          class="back"
          >{{$t('page.back')}}{{$t('page.list')}}</span>
          > 
          {{$route.query.name}}（{{$route.query.time}}）
      </div>
    </div>

    <div class="container-body"
         v-loading="loading">
      <template>
        <h3>{{resultData.holeSort}}</h3>
        <div class="space text-center">
          <Histogram
            :data="resultData.histogram"
          ></Histogram>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import waveChart from '@/components/WaveChart'
import { fetchHistoryDetail } from '@/api/table'
import Histogram from '../components/histogram.vue'
export default {
  data() {
    return {
      loading: true,
      exlName: '',
      resultData: {
        histogram: {}, // 柱状图数据
      },
    }
  },
  components: {
    waveChart,
    Histogram
  },
  mounted() {
    this.getHistoryDetail()
  },
  methods: {
    async getHistoryDetail() {
      const res = await fetchHistoryDetail({
        id: this.$route.query.id,
      })
      this.loading = false
      const data = JSON.parse(res.data[0].resultData)
      console.log(data)
      this.resultData = data
    },
    downloadExl() {
      const href = `${process.env.BASE_URL}receive/download/excel/1/${this.exlName}`
      window.open(href, '_blank')
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>